<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<style>
	.menu-button .bar:nth-of-type(1) {
		margin-top: 0px;
	}

	.menu-button .bar:nth-of-type(3) {
		margin-bottom: 0px;
	}

	.bar {
		position: relative;
		display: block;
		width: 50px;
		height: 4px;
		margin: 10px auto;
		background-color: #fff;
		border-radius: 10px;
		transition: .3s;
	}
	.menu-button:hover .bar:nth-of-type(1) {
		-webkit-transform: translateY(1.5px) rotate(-4.5deg);
		-ms-transform: translateY(1.5px) rotate(-4.5deg);
		transform: translateY(1.5px) rotate(-4.5deg);
	}
	.menu-button:hover .bar:nth-of-type(2) {
		opacity: .9;
	}
	.menu-button:hover .bar:nth-of-type(3) {
		-webkit-transform: translateY(-1.5px) rotate(4.5deg);
		-ms-transform: translateY(-1.5px) rotate(4.5deg);
		transform: translateY(-1.5px) rotate(4.5deg);
	}

	.cross .bar:nth-of-type(1) {
		-webkit-transform: translateY(15px) rotate(-45deg);
		-ms-transform: translateY(15px) rotate(-45deg);
		transform: translateY(15px) rotate(-45deg);
	}

	.cross .bar:nth-of-type(2) {
		opacity: 0;
	}

	.cross .bar:nth-of-type(3) {
		-webkit-transform: translateY(-15px) rotate(45deg);
		-ms-transform: translateY(-15px) rotate(45deg);
		transform: translateY(-15px) rotate(45deg);
	}

	.cross:hover .bar:nth-of-type(1) {
		-webkit-transform: translateY(13.5px) rotate(-40.5deg);
		-ms-transform: translateY(13.5px) rotate(-40.5deg);
		transform: translateY(13.5px) rotate(-40.5deg);
	}

	.cross:hover .bar:nth-of-type(2) {
		opacity: .1;
	}

	.cross:hover .bar:nth-of-type(3) {
		-webkit-transform: translateY(-13.5px) rotate(40.5deg);
		-ms-transform: translateY(-13.5px) rotate(40.5deg);
		transform: translateY(-13.5px) rotate(40.5deg);
	}
</style>

<!-- 文档地址 https://www.swiper.com.cn/api/ -->
<div class="swiper-container swiper-container-initialized swiper-container-horizontal"
style="height: 100vh;width: 100%">
<div class="swiper-wrapper">
	<div class="swiper-slide"
	style="min-width: 100px;width: 60%;max-width: 320px;background-color: #2C8DFB;color: #fff;">
	<ul style="list-style:none;width:100%;text-align:center;cursor:pointer;margin-top:30px;">
		<li style="padding:10px 0;">第一项</li>
		<li style="padding:10px 0;">第二项</li>
		<li style="padding:10px 0;">第三项</li>
	</ul>
</div>
<div class="swiper-slide"
style="display: flex;justify-content: center;align-items: center;width: 100%;background-color: #999">
<div class="menu-button"
style="position: absolute;top: 0px;left: 0px;padding: 10px;cursor: pointer;transition: .3s;background-color: #2C8DFB;">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div style="height:30%;width:60%">
	<h1>测试标题</h1>
	<p>这是一句测试段落这是一句测试段落这是一句测试段落</p>

</div>
</div>
</div>
<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>

<script type="text/javascript">
	var menuButton = document.querySelector('.menu-button');
	var openMenu = function () {
			swiper.slidePrev();//滑动到前一个滑块。
	};
	var swiper = new Swiper('.swiper-container', {
		slidesPerView: 'auto',//设置slider容器能够同时显示的slides数量(carousel模式)。
//可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。
		initialSlide: 1,//设定初始化时slide的索引。Swiper默认初始化时显示第一个slide
		resistanceRatio: 0,//抵抗率。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。
		slideToClickedSlide: true,//设置为true则点击slide会过渡到这个slide
        noSwipingSelector:'p,h1',//设置不可触摸滑动的元素标签
        on: {
			//回调函数，swiper从当前slide开始过渡到另一个slide时执行。
			slideChangeTransitionStart: function () {
				var slider = this;
				if (slider.activeIndex === 0) {
					menuButton.classList.add('cross');
					// required because of slideToClickedSlide
					menuButton.removeEventListener('click', openMenu, true);
				} else {
					menuButton.classList.remove('cross');
				}
			},
			//回调函数，swiper从一个slide过渡到另一个slide结束时执行。
			slideChangeTransitionEnd: function () {
				var slider = this;
				if (slider.activeIndex === 1) {
					menuButton.addEventListener('click', openMenu, true);
				}
			},
		}
	});
</script>
























































	<script class="_dcdev_preset_">
		var component_desc = "测试组件";
		var component_id = "4067849f47f5a2ad";
		var component_headimgurl = "https://thirdwx.qlogo.cn/mmopen/vi_32/jjUgO8JDJHSLBYXlre8icWic6FfDs695pjeaYcLcWoZ21B556ycN44Bf2kTekySjt4tGFPHgX247HrSSKwZrhtOQ/132";
		var component_nickname = "余奕润";
	</script>
